<template>
  <div>
    <el-form ref="formRef" :model="formData" label-width="auto" size="large" class="search-form">
      <el-form-item v-for="(item, index) in formConifg" :label="item.label" :prop="item.prop" :key="index">
        <component
          :is="item.component"
          v-model="formData[item.prop]"
          v-bind="item.attrs"
          style="width: 100%"
          @change="(val) => (item.change ? item.change(val, formData) : '')"
        ></component>
      </el-form-item>
      <el-form-item class="operate-btn" v-if="operateProps.length">
        <div v-for="item in operateProps" class="btn-item">
          <el-button type="primary" :icon="item.icon" @click="item.handle">{{ item.text }}</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { ExportBtn } from '@com/Button/index';
import { Plus, Download } from '@element-plus/icons-vue';
const props = defineProps({
  formConifg: {
    //表单配置项
    type: Array,
    default: () => [],
  },
  formData: {
    type: Object,
    default: () => {},
  },
  operateProps: {
    //按钮组配置
    type: Array,
    default: [],
  },
});
</script>
<style lang="scss" scoped>
.search-form {
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    width: 25%;

    :deep(.el-form-item__label-wrap) {
      padding-left: 12px;
    }
  }

  .operate-btn {
    flex-grow: 1;
    :deep(.el-form-item__content) {
      display: flex;
      justify-content: end;
      .btn-item {
        margin-right: 10px;
        &:last-child {
          margin-right: 0px;
        }
        .el-button {
          max-width: 70px;
        }
      }
    }
  }
}
</style>
